<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>tab选项卡</title>
	</head>
	<style>
		ul{
			width: 200px;
			height: 300px;
			bo rder: 1px solid red;
			margin: 0;
			padding: 0;
		}
		ul button{
			width: 130px;
			height: 80px;
			bor der: 1px solid red;
			list-style: none;
			float: left;
			line-height: 50px;
			text-align: center;
			margin-right: 15px;
			background-color: #aaaaaa;
		}
		div{
			width: 500px;
			height: 500px;
			bor der: 1px solid red;
			background-color: #ffff00;
			line-height: 500px;
			text-align: center;
		}
	</style>
	<script src="../js/jquery-1.11.1.js"></script>
	<script>
		$(function(){
			$(".btn1").click(function(){
				$(".btn1").css("background-color","#ffff00").siblings().css("background-color","#aaaaaa");
			$("#main").html("tab文字内容1");
			});
			
			$(".btn2").click(function(){
				$(".btn2").css("background-color","#ffff00").siblings().css("background-color","#aaaaaa");
			$("#main").html("tab文字内容2");
			});
			$(".btn3").click(function(){
				$(".btn3").css("background-color","#ffff00").siblings().css("background-color","#aaaaaa");
			$("#main").html("tab文字内容3");
			});
		});
	</script>
	<body>
		<ul>
			<button class="btn1">tab1</button>
			<button class="btn2">tab2</button>
			<button class="btn3">tab3</button>
			<div id="main"></div>
		</ul>
	</body>
</html>